<!--
 * @Descripttion: 
 * @version: 
 * @Author: hutao
 * @Date: 2023-04-23 14:50:21
 * @LastEditors: hutao
 * @LastEditTime: 2023-06-06 09:13:25
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: hutao
 * @Date: 2023-04-10 14:15:33
 * @LastEditors: hutao
 * @LastEditTime: 2023-04-23 16:32:19
-->
<template>
  <div id="index">
    <el-container style="height: 100vh" class="index">
      <el-header style="padding: 0; height: min-content">
        <xhkj-layout02>
          <router-link to="/login" slot="navEnd">注销</router-link>
        </xhkj-layout02>
      </el-header>

      <el-container class="body">
        <el-aside :width="state.collapsed ? '66px' : '230px'" class="left">
          <el-menu
            :default-active="state.defaultIndex"
            router
            :collapse="state.collapsed"
            :collapse-transition="false"
          >
            <el-menu-item class="ht-menu-item" index="/wineStockInquiry">
              <i class="el-icon-goblet-square-full"></i>
              <span slot="title">酒品库存查询</span>
            </el-menu-item>

            <el-menu-item class="ht-menu-item" index="/wineJarInquiry">
              <i class="el-icon-price-tag"></i>
              <span slot="title">酒罐库存</span>
            </el-menu-item>

            <el-menu-item class="ht-menu-item" index="/">
              <i class="el-icon-goblet-square-full"></i>
              <span slot="title">收酒</span>
            </el-menu-item>
            <el-menu-item class="ht-menu-item" index="/move">
              <i class="el-icon-goblet-square-full"></i>
              <span slot="title">移库</span>
            </el-menu-item>
            <el-menu-item class="ht-menu-item" index="/mergeInventory">
              <i class="el-icon-goblet-square-full"></i>
              <span slot="title">并库</span>
            </el-menu-item>
            <el-menu-item class="ht-menu-item" index="/mixedWine/2">
              <i class="el-icon-goblet-square-full"></i>
              <span slot="title">合酒-张集</span>
            </el-menu-item>
            <el-menu-item class="ht-menu-item" index="/mixedWine/1">
              <i class="el-icon-goblet-square-full"></i>
              <span slot="title">合酒-古井、产业园</span>
            </el-menu-item>
            <!-- <el-menu-item class="ht-menu-item"
                          index="/collectWine">
              <i class="el-icon-s-home"></i>
              <span slot="title">合酒</span>
            </el-menu-item>

            <el-menu-item class="ht-menu-item"
                          index="/collectWine">
              <i class="el-icon-s-home"></i>
              <span slot="title">移库</span>
            </el-menu-item> -->
          </el-menu>
          <el-button
            class="action-btn"
            :title="state.collapsed ? '展开菜单' : '收起菜单'"
            type="text"
            size="medium"
            :icon="state.collapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
            @click="state.collapsed = !state.collapsed"
            style="font-size: 16px"
          ></el-button>
        </el-aside>
        <el-container>
          <el-main style="padding: 16px 24px 0 24px" class="cont">
            <router-view v-if="state.loading"></router-view>
          </el-main>
          <el-footer style="height: 45px"
            ><xhkj-footer com-style="line-height:45px"></xhkj-footer
          ></el-footer>
        </el-container>
      </el-container>
    </el-container>
    <div
      v-if="state.isLogin"
      is="common-datas"
      @commonDatas="commonDatas"
      @error="error"
    ></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { baseConfig } from 'vue-kst-auth';
interface State {
  /** 数据状态 */
  loading: boolean;
  /** 是否登陆 */
  isLogin: boolean;
  /** 默认选中导航 */
  defaultIndex: string;
  /** 菜单是否收缩 */
  collapsed: boolean;
}

@Component({
  components: {},
})
export default class App extends Vue {
  /** 数据 */
  state: State = {
    loading: false,
    isLogin: false,
    defaultIndex: '/',
    collapsed: true,
  };
  /** 生命周期 */
  created() {
    // 动态加载引用文件
    const files = this.$store.getters.getBaseData('files');
    const filesKeys: string[] = Object.keys(files);
    let heatStr = document.getElementsByTagName('head')[0].innerHTML;
    filesKeys.forEach((cur) => {
      const src = files[cur];
      if (src && /\.css$/.test(src.toString())) {
        heatStr += `<link rel="stylesheet" href="${src}?v=${Date.now()}" />`;
      }
      if (src && /\.ico$/.test(src.toString())) {
        heatStr += `<link rel="icon" href="${src}">`;
      }
    });
    document.getElementsByTagName('head')[0].innerHTML = heatStr;
    this.state.isLogin = baseConfig.getLoginState() || false;
  }
  mounted() {
    this.state.defaultIndex = this.$route.path;
  }
  /** 方法 */
  /** 接收基础数据 */
  commonDatas(msg: any) {
    const [res] = msg.detail;
    this.state.loading = true;
    /** 授权 */
    if (
      res.SessionState &&
      res.SessionState.auth &&
      res.SessionState.auth.grantedPolicies
    ) {
      this.$store.commit('setBaseDataApi', {
        key: 'grantedPolicies',
        value: res.SessionState.auth.grantedPolicies,
      });
    }
    /** 部门人员数据 */
    if (res.organizationUsers) {
      this.$store.commit('setBaseDataApi', {
        key: 'organizationUsers',
        value: res.organizationUsers.items,
      });
    }
    /** 部门数据 */
    if (res.organizationUnit) {
      this.$store.commit('setBaseDataApi', {
        key: 'organizationUnit',
        value: res.organizationUnit,
      });
    }
    /** 人员数据 */
    if (res.users) {
      this.$store.commit('setBaseDataApi', {
        key: 'users',
        value: res.users.items,
      });
    }
    /** 严重等级 */
    if (res.severityLevel) {
      this.$store.commit('setBaseDataApi', {
        key: 'severityLevel',
        value: res.severityLevel,
      });
    }
  }
  error() {
    this.state.loading = true;
  }
  /** 获取授权 */
  get grantedPolicies(): any {
    return this.$store.getters.getBaseData('grantedPolicies') || {};
  }
  /** 监听 */
  @Watch('$route.path', { deep: true })
  ondata(val: string) {
    this.state.defaultIndex = val || '/';
  }
}
</script>

<style lang="scss">
body,
html {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  &:link {
    color: #476ef3;
  }
  a:visited {
    color: #551a8b;
  }
  a:hover {
    color: #335ff7;
  }
  a:active {
    color: #0000ff;
  }
}
.index {
  background: url('/publicData/images/bg.png ') center no-repeat;
  background-size: 100% 100%;
  font-family: 'SourceHanSansCN-Normal', 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333333;
  font-size: 12px;
}
</style>
<style lang="scss" scoped>
.index {
  .el-menu {
    background: none;
    border: none;
  }
  .body {
    .left {
      box-sizing: border-box;
      border-right: 1px solid #e6e6e6;
      position: relative;
      // background: #fff;
      .action-btn {
        position: absolute;
        bottom: 0;
        right: 6px;
      }
    }
  }
}
</style>
